<!--
 * @Author: chenzhinjian
 * @Date: 2019-01-17 20:29:32
 * @LastEditTime: 2019-03-19 16:04:53
 * @Description: 
 -->
<template>
  <div :class="classes" @click="switchChang()">
      <div :class="checkeds">
        <input type="hidden" />
        <span class="ifast-inner-left">{{trueText}}</span>
        <span class="ifast-inner-right">{{falseText}}</span>
      </div>
  </div>
</template>

<script>
import { oneOf } from '../../utils/index';
let prefixCls = 'ifast';
export default {
    name: 'iSwitch',
    props:{
        value:{
          type:[String,Number,Boolean],
          default:false
        },
        trueValue:{
          type:[String,Number,Boolean],
          default:true
        },
        falseValue:{
          type:[String,Number,Boolean],
          default:false
        },
        trueText:{
          type:String,
          default:''
        },
        falseText:{
          type:String,
          default:''
        },
        disabled:{
          type:Boolean,
          default:false
        },
        size:{
          type:String,
          validator(value){
            return oneOf(value,['lg','sm'])
          }
        }
    },
    computed:{
      classes () {
          // ` 
               
        return [
          `${prefixCls}-group-switch`,
          {
            [`${this.size}`]:!!this.size
          }
        ];          
      },
      checkeds(){
       
        return [
          'ifast-switch',
          {
            [`${prefixCls}-switch-checked`]:this.switchChecked===this.trueValue,
            [`${prefixCls}-switch-disabled`]:this.disabled,
          }
        ]
      }
    },
    data() {
      return {
        switchChecked:this.value
      }
    },

    methods: {
      switchChang(){
        if(this.disabled){
          return;
        }
        let isValue=this.value===this.falseValue?this.trueValue:this.falseValue;
        this.switchChecked=isValue;
        this.$emit('input',this.switchChecked)
        this.$emit('on-change',this.switchChecked)
      }
    },
    mounted(){
    },
    watch: {
      value(val){
        this.switchChecked=val;
      }
    },
}
</script>

<style lang='scss' scoped>

</style>
